import React, { Component } from 'react';
import * as echarts from 'echarts';
import '@/assets/css/welcome.css'
import styled from 'styled-components';
import '@/assets/css/pie.css'
import Pts from 'prop-types'
class Pie extends Component {
    // 定义类propTypes型规则
    static propTypes = {
        id:Pts.string.isRequired,
        subtitle:Pts.string.isRequired,
        text:Pts.string.isRequired,
    }
    static defaultProps = {
        w:'29%',
        h:'500px',
    }
    render() {
        var chartDom = document.getElementById(this.props.id);
        if(chartDom){
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            title: {
                // 标题
                text: this.props.text,
                subtext: '2022/07',
                left: 'center'
            },
            tooltip: {
                // 提示框
                trigger: 'item'
            },
            // legend: {
            //      图例
            //     orient: 'vertical',
            //     left: 'left',
            //     top:'30px'
            // },
            series: [
                {
                    // 数据
                name: this.props.subtitle,
                type: 'pie',
                radius: '60%',
                data: this.props.data,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };
            if(this.props.legend){
                option.legend = {
                    orient: 'vertical',
                    left: 'left',
                    top:'30px'
                }
            }
            option && myChart.setOption(option);
        }
        return (
           /*  <Title> */
                <div id={this.props.id} style={{width: this.props.w, height: this.props.h,margin:'30px'}}>
                    
                </div>
            /* </Title> */
        );
    }
    componentDidMount(){
        
    }
}
// const Title = styled.div`
//     width:33.3%;
//     height:500px;
// `
export default Pie;
